<template>
  <div class="nav_outer">
    <Header>我的预约</Header>
    <div class="jobs">
      <div class="job" v-for="(item,index) in jobwidthDetails" v-bind:key="item.id" :data-id="item.id">
        <p class="job_title">{{item.title}}</p>
        <p class="job_tag">
          <span v-for="jtag in (item.positionTags ? item.positionTags.split(',') : [])" v-bind:key="jtag">{{jtag}}</span>
        </p>
        <span class="common_statu" v-if="item.marketingType==0">入职奖</span>
        <div class="flex_bet">
          <span class="job_price">{{item.salaryTips}}元/月</span>
        </div>
        <div class="flex_bet tagsouter">
          <div class="jobtags">
            <span v-for="tag in (item.welfareTags ? item.welfareTags.split(',') : [])" v-bind:key="tag">{{tag}}</span>
          </div>
          <span class="address">{{item.cityName}}·{{ (item.updateDate || item.createDate) | today}}</span>
        </div>
      </div>
      <div class="refresh"></div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      pullre: null,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      totalPage: 1,
      jobs: [],
      jobwidthDetails: []
    };
  },
  created() {
    this.loadJobs();
  },
  mounted() {
    let mui = this.mui,
      that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadJobs();
    }})
    mui(".jobs").on("tap", ".job", function() {
      var id = this.getAttribute("data-id");
     that.$router.replace({ path: "/gangwei/" + id });
    });
  },
  methods: {
    loadJobs() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http.get("/yzj/intention_factories", {
        current: that.pageNum,
        size: that.pageSize
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.jobs = res.object;
            that.loadDetails(res.object);
          } else {
            that.jobs = that.jobs.concat(res.object);
            that.loadDetails(res.object, true);
          }
          that.totalPage = res.totalPage || 1;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    },
    loadDetails(arr, concat) {
      let newarr=[]
      arr.forEach(item => {
        newarr.push(item.recruitmentId);
      });
      this.Http2.get(`/mobile/enrollment/list`, {
        ids: newarr.join(',')
      }).then(
        res => {
          if (concat) {
            this.jobwidthDetails = this.jobwidthDetails.concat(res);
          } else {
            this.jobwidthDetails = res;
          }
        },
        () => {}
      );
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.jobs {
  .job {
    margin: px2em(12) 0;
    background: #fff;
    padding: px2em(20) px2em(30);
    position: relative;
    > p {
      margin-bottom: 4px;
    }
  }
  .job_title {
    color: #333;
  }
  .job_tag {
    font-size: 0.7em;
    color: #333;
  }
  .job_price {
    font-size: 1.2em;
    color: red;
  }
  .common_statu {
    position: absolute;
    right: px2em(30);
    top: 50%;
    margin-top: -px2em(22);
  }
  .tagsouter {
    margin-top: px2em(28);
  }
  .jobtags > span {
    height: px2em(40);
    border-radius: px2em(20);
    line-height: px2em(40);
    color: #00b9ff;
    border: 1px solid #00b9ff;
    padding: 0 5px;
    font-size: 0.7em;
    margin-right: 6px;
  }
  .address {
    font-size: 0.8em;
    color: #aeafaf;
  }
}
</style>